<template>
  <div :class="`list-b-${maring}`">
    <el-row :gutter="maring" v-for="(tags) in tagsArr(data, list)">
      <el-col :span="24 / list" v-for="(tag) in tags">
        <slot name='item' :row="tag.row" :rowIndex="tag.rowIndex" />
      </el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
const { proxy } = getCurrentInstance() as any;
const props = withDefaults(
  defineProps<{
    data?: any;
    list?: number;
    maring?: number;
  }>(),
  {
    data: [],
    maring: 12,
    list: 4,
  },
);
const tagsArr = (arr: any, list: number) => {
  let _arr: any = []
  let _tagArr: any = []
  if (proxy.$isArr(arr)) {
    arr.forEach((el: any, index: any) => {
      _tagArr.push({
        rowIndex: index,
        row: el,
      })
      if (_tagArr.length === list || index === arr.length - 1) {
        _arr.push(_tagArr)
        _tagArr = []
      }
    });
  }
  return _arr
}
onMounted(() => {

});
onUnmounted(() => {

});
</script>
<style scoped></style>
